<!--
 * @Author: 王鹏 2911783749@qq.com
 * @Date: 2022-10-24 18:31:43
 * @LastEditors: 王鹏 2911783749@qq.com
 * @LastEditTime: 2022-10-25 11:49:48
 * @FilePath: \v_shop\code\src\views\RolesDialog.vue
 * @Description: 角色列表弹窗组件
-->
<template>
  <div>
    <el-dialog :title="dialog.title" :visible.sync="dialog.show">
      <el-form ref="rolesFormRef" :model="rolesForm" :rules="rolesFormRules">
        <el-form-item
          label="角色名称"
          :label-width="formLabelWidth"
          prop="roleName"
        >
          <el-input v-model="rolesForm.roleName"></el-input>
        </el-form-item>
        <el-form-item
          label="角色描述"
          :label-width="formLabelWidth"
          prop="roleDesc"
        >
          <el-input v-model="rolesForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialog.show = false">取 消</el-button>
        <el-button type="primary" @click="submit('rolesFormRef')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add_roles, edit_roles } from "../http/api";
export default {
  name: "RolesDialog",
  props: {
    rolesForm: {
      type: Object,
    },
    dialog: {
      type: Object,
    },
  },
  data() {
    return {
      formLabelWidth: "80px",
      rolesFormRules: {
        roleName: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "角色描述不能为空", trigger: "blur" },
        ],
      },
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    /**
     * @description: 
     * @param {*} 点击提交执行的方法
     * @return {*}
     */    
    submit(formName) {
      // 验证角色表单校验是否通过
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 判断是否为添加角色状态
          if (this.dialog.option == "add") {
            add_roles(this.rolesForm).then((res) => {
              console.log(res);
              if (res.data.meta.status != 201) {
                this.$message.error(res.data.meta.msg);
                return;
              }
              this.$message.success(res.data.meta.msg);
              this.dialog.show = false;
              this.$emit("update");
            });
            // 判断是否为编辑角色状态
          } else if (this.dialog.option == "edit") {
            edit_roles(this.rolesForm).then((res) => {
              console.log(res);
              if (res.data.meta.status != 200) {
                this.$message.error(res.data.meta.msg);
                return;
              }
              this.$message.success(res.data.meta.msg);
              this.dialog.show = false;
              this.$emit("update");
            });
            // 校验未通过提示信息
          } else {
            console.log("error submit!!");
            return false;
          }
        }
      });
    },
  },
  watch: {},
  mixins: [],
};
</script>
<style  scoped>
</style>